<template>
  <!-- 顶部分类栏 -->
  <el-tabs type="border-card" :stretch="true">
    <el-tab-pane
      v-for="(item, index) in tabPane"
      :key="index"
      :label="item.label"
    >
      <tab1 v-if="item.tab === 1"></tab1>
      <tab2 v-if="item.tab === 2"></tab2>
      <tab3 v-if="item.tab === 3"></tab3>
    </el-tab-pane>
  </el-tabs>

  <card></card>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import tab1 from "./tabPane/tab1.vue";
import tab2 from "./tabPane/tab2.vue";
import tab3 from "./tabPane/tab3.vue";
import card from "./card/card.vue";

const tabPane = [
  {
    title: "分类",
    label: "分类",
    tab: 1,
  },
  {
    title: "已上映",
    label: "已上映",
    tab: 2,
  },
  {
    title: "评分",
    label: "评分",
    tab: 3,
  },
];

export default defineComponent({
  name: "personal",
  components: { tab1, tab2, tab3, card },
  setup() {
    const drawer = ref(false);
    const direction = ref("ttb");

    return {
      drawer,
      direction,
      tabPane,
    };
  },
});
</script>
